<template>
  <!-- 添加或修改品牌对话框 -->
  <el-dialog
    :title="title"
    v-model="props.openRecursive"
    width="800px"
    append-to-body
    @close="handleClose"
  >
    <el-form
      ref="RecursiveRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="参考阈值" prop="threshold" required>
        <el-input-number
          :min="0"
          v-model="form.threshold"
          placeholder="请输入"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="参考价格" prop="amount" required>
        <el-input-number
          :min="0"
          v-model="form.amount"
          placeholder="请输入"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status" required>
        <el-switch
          :width="58"
          class="demo"
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
          active-text="开启"
          inactive-text="关闭"
          inline-prompt
        />
      </el-form-item>
      <el-form-item prop="siteTransportDescriptions" required>
        <MoreLanguage
          :newList="form.siteTransportDescriptions"
          label="快递名称"
          @publicCheck="publicCheck"
        ></MoreLanguage>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleAddBrandDescription"
        >添加</el-button
      >
      <el-button
        type="danger"
        @click="handleDeleteBrandDescription"
        style="margin-right: 60%"
        >删除</el-button
      >

      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
</template>
  <script setup>
import { ref, defineProps, defineEmits, watch, onMounted, reactive } from "vue";
const emits = defineEmits(["handleSure", "handleClose"]);
const { proxy } = getCurrentInstance();

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
  openRecursive: {
    type: Boolean,
    default: false,
  },
});
const title = ref("新增");
const isAdd = ref(true);
const form = ref({
  threshold: null, //参考阈值
  status: 1, //状态
  amount: null, //参考价格
  siteTransportDescriptions: [], //多语言
});
const checkedBrandDescription = ref([]); // 子表选中数据

watch(
  () => props.openRecursive,
  () => {
    if (!props.openRecursive) return;
    form.value.siteTransportDescriptions = [];
    if (Object.keys(props.item).length) {
      title.value = "编辑";
      isAdd.value = false;
      getDetails(); //获取详细信息
    } else {
      title.value = "新增";
      isAdd.value = true;
      form.value.siteTransportDescriptions.push({
        languageId: 1,
        name: "",
      });
    }
  }
);
/** 提交按钮 */
const submitForm = () => {
  proxy.$refs["RecursiveRef"].validate((valid) => {
    if (valid) {
      if (!proxy.publicArray(form.value.siteTransportDescriptions))
        return proxy.$modal.msgError("请完整填写新增语言");
      if (isAdd.value) {
        site.general
          .sitetransportAdd({
            data: form.value,
          })
          .then((res) => {
            if (res.code !== 200) return;
            proxy.resetForm("RecursiveRef");
            form.value.siteTransportDescriptions = [];
            proxy.$modal.msgSuccess("添加成功");
            emits("handleSure");
          });
      } else {
        site.general
          .sitetransportUpdate({
            pathParams: {
              id: props.item.id,
            },
            data: form.value,
          })
          .then((res) => {
            if (res.code !== 200) return;
            form.value.siteTransportDescriptions = [];
            proxy.$modal.msgSuccess("修改成功");
            proxy.resetForm("RecursiveRef");
            emits("handleSure");
          });
      }
    }
  });
};

/** 复选框选中数据 */
const publicCheck = (selection) => {
  checkedBrandDescription.value = selection;
};
/** 品牌详情添加按钮操作 */
const handleAddBrandDescription = () => {
  form.value.siteTransportDescriptions.push({
    languageId: null,
    name: "",
  });
};
/** 品牌详情删除按钮操作 */
const handleDeleteBrandDescription = () => {
  if (checkedBrandDescription.value.length == 0) {
    proxy.$modal.msgError("请勾选");
  } else {
    form.value.siteTransportDescriptions =
      form.value.siteTransportDescriptions.filter(
        (item) => !checkedBrandDescription.value.includes(item.index)
      );
    checkedBrandDescription.value = [];
  }
};

const handleClose = () => {
  form.value.siteTransportDescriptions = [];
  proxy.resetForm("RecursiveRef");
  emits("handleClose");
};
const getDetails = () => {
  site.general
    .sitetransportGetbyid({
      pathParams: {
        id: props.item.id,
      },
    })
    .then((res) => {
      form.value.status = res.data.status;
      form.value.amount = res.data.amount;
      form.value.threshold = res.data.threshold; //参考阈值

      res.data.descriptions.forEach((code) => {
        form.value.siteTransportDescriptions.push({
          name: code.name,
          languageId: code.languageId,
        });
      });
      // console.log(form.value.siteTransportDescriptions);
    });
};
const rules = reactive({
  amount: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  threshold: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
});
</script>